<template>
	<view class="father">
		<view id="confirmbox">
			<view class="money">请输入充值金额</view>
			<view class="inputbox">
				<text class="inputtext">￥</text>
				<input type="text" class="input" value="" v-model="balance.rechargeMoney" placeholder="请输入金额" />
			</view>
			<view class="text">单词交易限额100000</view>
		</view>
		<view class="confirm" @tap="confirm">确认</view>
	</view>
</template>

<script>
	import {createNamespacedHelpers} from 'vuex'
	const {mapActions} = createNamespacedHelpers('bankcard')
	const {mapMutations:userMapMutations,mapActions:userMapActions,mapState:userMapstate} = createNamespacedHelpers('UserInfor')
	export default {
		onLoad(option) {
			const item = JSON.parse(option.item)
			this.balance = item
		},
		data() {
			return {
				balance:{
					id: '',
					memberUsername:"",
					number: "",
					password: "",
					rechargeMoney: '',
				}
			}
		},
		computed:{
			...userMapstate(['userData','userPass'])
		},
		methods: {
			...mapActions(['addbalance']),
			...userMapActions(['getUser']),
			async confirm(){
				const data = await this.addbalance(this.balance)
				const userdata = await this.getUser({
					username:this.userData.username,
					password:this.userPass
				})
				// console.log(userdata);
				if(data.code==200 && userdata.code==200){
					await uni.showToast({
					    title: '充值成功',
					    duration: 3000
					});
					uni.switchTab({
						url:'/pages/personal/personal'
					})
				}else if(data.code==600){
					uni.showToast({
					    title: '余额不足',
					    duration: 2000
					});
				}else{
					uni.showToast({
					    title: '充值失败',
					    duration: 2000
					});
				}
			}
		}
	}
</script>

<style>
	#confirmbox {
		width: 100%;
		height: auto;
	}
	.inputbox{
		display: flex;
		clear: both;
	}
	.inputtext{
		float: left;
		margin-top: 25rpx;
		margin-left: 10rpx;
	}
	.money {
		margin-top: 20rpx;
		padding-left: 20rpx;
		/* border: 1px solid red; */
		font-size: 25rpx;
		color: rgba(0,0,0,0.5);
		margin-bottom: 20rpx;
	}
	.input{
		width: 95%;
		/* border: 1px solid red; */
		height: 88rpx;
		border-bottom: 1rpx solid #EEEEEE;
		margin: 0rpx auto 10rpx;
	}
	.text{
		/* border: 1px solid red; */
		padding-left: 20rpx;
		font-size: 28rpx;
		color: rgba(0,0,0,0.8);
	}
	.father{
		height: 100vh;
		position: relative;
	}
	.confirm{
		width: 650rpx;
		height: 88rpx;
		background-color: #3476F1;
		border-radius: 40rpx;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: 500;
		margin: 0 auto;
		font-family: PingFang SC;
		position: absolute;
		bottom: 100rpx;
		left: 0rpx;
		right: 0rpx;
	}
</style>
